<!DOCTYPE html>
<html lang="zh">
{% extends "base.html" %}
  <head>
    <meta charset="UTF-8" />
    <meta
      name="description"
      content="这个是单词的默认页面，只展示word_value，"
    />
        {% block title %}

    <title>单词</title>    {% endblock %}
  </head>
  <body>
  <!--继承base搜索框-->
 {% block body %}
  
   <div id="container" style="width: 100%">

        <div id="header" style="background-color: #ffa500;text-align: center">
          <h1 style="margin-bottom: 0">WORD: {{h_word.word_value}}</h1>
        </div>

        <div
          id="menu"
          style="
            background-color: #ffd700;
            height: 450px;
            width: 20%;
            float: left;
          "
        >
        <b>菜单栏：</b><br />
          
        <li><a href="../">HOME</a></li>  

        <li><a href="./display" target=_blank>LEARN MORE</a></li>
      
        <li><a href="../../{{h_word.wordbook}}">WORDBOOK</a></li>
          
        </div>

        <div
          id="content"
          style="
            background-color: #eeeeee;
            height: 450px;
            width: 80%;
            float: left;
          "
        >
          <h1>Here are more detail infomations about this word :</h1>
      <br />
      <table>
        <tr>
          <td><b>单词：</b></td>
          <td><b>{{h_word.word_value}}</b></td>
        </tr>

        <tr>
          <td>音标：</td>
          <td>{{h_word.phonetic}}</td>
        </tr>

        <tr>
          <td>中文释义：</td>
          <td>{{h_word.zh_meaning}}</td>
        </tr>

        <tr>
          <td>例句：</td>
          <td>{{h_word.sentence}}</td>
        </tr>

        <tr>
          <td>所在词本：</td>
          <td>{{h_wordbook}}</td>
        </tr>
      </table>
        </div>

        <div
          id="footer"
          style="background-color: #ffa500;height: 50px; clear: both;"
        >
          <div id="previous"
          style="float: left">
          
            
            <button id="previous_button" type="button" onclick="isPreLegal()" >
            <a href="../{{previous_id}}">Previous</a>
            </button>
            </div>
        <div id="next"
                  style="float: right"  >
                    
                    <button id="next_button" type="button" onclick="isNextLegal()">
                    <a href="../{{next_id}}">Next</a>
                    </button>
        
          </div>
          <script>
          function isPreLegal()
          {
            var _button = document.getElementById("previous_button");
           
            //success ：{{previous_id}}确实是一个int类型的，说明在view中是什么类型，传过来也是相同的类型。
            var pre={{previous_id}};
            if(pre<=0)
            {
              alert("前面没有单词了！");
              stopDefault(_button);
            }
            
          }

          function isNextLegal()
          {
            var MAX=5;


            var _next_button=document.getElementById("next_button");
            if({{next_id}}>MAX)
            {
              alert("后面没有单词了！");
              stopDefault(_next_button);
            }
          }


          //阻止浏览器默认行为触发的通用方法 (网上抄的。。)
      function stopDefault(e) {
        if (e && e.preventDefault) {
            e.preventDefault();//防止浏览器默认行为(W3C) 
        } else {
           window.event.returnValue = false;//IE中阻止浏览器行为 
        }
        return false;
    }



         

           </script>
                 </div>
    </div>



  {%endblock%}
  </body>
</html>
